<template>
    <div class="userinfomanagement">
        <div class="userinfomanagement-top">
            <div class="userinfomanagement-top-search">
                <div class="userinfomanagement-top-search-item">
                    <el-input
                        v-model="form.username"
                        placeholder="查找用户名"
                        clearable
                    >
                        <template slot="prepend">用户名</template>
                    </el-input>
                </div>

                <div class="userinfomanagement-top-search-item">
                    <el-input
                        v-model="form.phone"
                        placeholder="查找电话"
                        clearable
                    >
                        <template slot="prepend">电话</template>
                    </el-input>
                </div>
            </div>
            <el-button @click="handleSearchUser" type="primary">查找</el-button>
        </div>
        <el-table
            :data="userList"
            style="width: 100%; margin-bottom: 20px"
            border
            stripe
        >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column
                prop="username"
                label="用户名"
                width="180"
            ></el-table-column>
            <el-table-column
                prop="sex"
                label="性别"
                width="180"
            ></el-table-column>
            <el-table-column prop="phone" label="电话"> </el-table-column>
            <el-table-column prop="age" label="年龄"> </el-table-column>
            <el-table-column prop="function" label="操作" scope="">
                <template slot-scope="scope">
                    <el-button plain @click="handleEditUser(scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        type="danger"
                        slot="reference"
                        plain
                        @click="handleDelUser(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="编辑用户信息"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <div class="userinfo-item">
                <p class="userinfo-item-label">用户名</p>
                <el-input
                    v-model="editInfo.username"
                    placeholder="请输入内容"
                ></el-input>
            </div>
            <div class="userinfo-item">
                <p class="userinfo-item-label">性别</p>
                <el-select v-model="editInfo.sex" placeholder="请选择">
                    <el-option value="男"> </el-option>
                    <el-option value="女"> </el-option>
                </el-select>
            </div>
            <div class="userinfo-item">
                <p class="userinfo-item-label">电话</p>
                <el-input
                    v-model="editInfo.phone"
                    placeholder="请输入内容"
                ></el-input>
            </div>
            <div class="userinfo-item">
                <p class="userinfo-item-label">年龄</p>
                <el-input
                    v-model="editInfo.age"
                    placeholder="请输入内容"
                ></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmitUser"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :total="total"
            :page-sizes="[5, 10, 20, 50]"
            @current-change="handleChangeCurrentPage"
            @size-change="handleChangeSize"
        ></el-pagination>
    </div>
</template>

<script>
import { listUsers, deleteUser } from "../../api";

export default {
    name: "UserinfoManagement",
    data() {
        return {
            form: {
                username: "",
                phone: "",
                level: null,
                type: 0,
            },
            editInfo: {
                username: "",
                sex: "",
                phone: "",
                age: "",
            },
            userList: null,
            total: 0,
            size: 10,
            currentPage: 1,
            dialogVisible: false,
        };
    },

    methods: {
        async getUserList(pageNo, pageSize) {
            const res = await listUsers("/user/list", {
                pageNo,
                pageSize,
                ...this.form,
            });
            this.total = res.data.data.total;
            this.size = res.data.data.size;
            let result = res.data.data.records.map((item) => {
                item.sex = item.sex === 0 ? "女" : "男";
                return item;
            });
            return result;
        },

        async handleDelUser(id) {
            const res = await deleteUser("/user/delete", { id });
            if (res.data.code === 0) {
                this.$message({
                    type: "success",
                    message: "删除用户成功",
                });
                this.userList = await this.getUserList(
                    this.currentPage,
                    this.size
                );
            } else {
                this.$message.error(res.data.msg);
            }
        },

        async handleChangeCurrentPage(page) {
            this.currentPage = page;
            this.userList = await this.getUserList(this.currentPage, this.size);
        },

        async handleChangeSize(size) {
            this.size = size;
            this.userList = await this.getUserList(this.currentPage, this.size);
        },

        async handleSearchUser() {
            this.userList = await this.getUserList(this.currentPage, this.size);
        },

        handleEditUser(user) {
            this.editInfo = { ...user };
            this.dialogVisible = true;
        },

        handleSubmitUser() {
            this.dialogVisible = false;
            const { sex } = this.editInfo;
        },
    },

    async mounted() {
        this.userList = await this.getUserList(1, this.size);
    },
};
</script>

<style lang="less">
.userinfomanagement {
    &-top {
        display: flex;
        margin-bottom: 20px;
        &-search {
            display: flex;
            &-item {
                margin-right: 20px;
            }
        }
    }
    .el-pagination {
        float: right;
    }

    .userinfo-item {
        .el-input {
            width: 100%;
        }
    }
}
</style>
